<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <title>React App</title>
  <link href=./static/css/main.css rel=stylesheet>
</head>

<body onload="init()">
  <div id="renderDom"></div>
  <script type=text/javascript src=./static/js/main.js></script>
</body>
<script>
  // 表单的配置项
  const forms = [
    {
      label: '查询时间',
      dataIndex: 'date',
      type: 'range-picker',
      props: {
        clearable: 'true',
      },
    },
    {
      label: '日期',
      dataIndex: 'date2',
      type: 'date-picker',
      props: {
        clearable: 'true',
      },
    },
    {
      label: '步骤',
      dataIndex: 'fileName',
      type: 'select',
      data: [
        { label: '单步骤', value: '1' },
        { label: '多步骤', value: '2' },
      ],
      props: {
        allowClear: 'true',
      },
    },
    {
      label: '类型',
      dataIndex: 'fileType',
      type: 'select',
      data: [
        { label: '按天', value: '1' },
        { label: '按月', value: '2' },
      ],
      props: {
        allowClear: 'true',
      },
    },
  ];

  // 折线图配置
  const lineConfig = {
    // 折线图的x轴数据
    xAxisData: [
      '2022/8/11',
      '2022/8/12',
      '2022/8/13',
      '2022/8/14',
      '2022/8/15',
      '2022/8/16',
      '2022/8/17',
    ],
    // 折线图的y轴数据
    yAxisData: [150, 230, 224, 218, 135, 147, 260],
  };

  // 饼图配置
  const partConfig = {
    // 饼图的数据
    chartData: [
      { value: 40, name: 'rose 1' },
      { value: 38, name: 'rose 2' },
      { value: 32, name: 'rose 3' },
      { value: 42, name: 'rose 4' },
      { value: 52, name: 'rose 5' },
      { value: 62, name: 'rose 6' },
    ],
  };

  function init() {
    // 创建组件的实例
    this.test = new window.QueryEchart.QueryEchart({
      renderTo: 'renderDom',
      forms,
      lineTitle: '做账步骤按产品按天耗时',
      partTitle: '核算处理按业务类型处理耗时百分比%',
      type: 'all',
      // mode: 'remote',
      lineConfig,
      partConfig,
      onQuery: query, // 查询函数
      onReset: reset // 重置函数
    });
    // test.render();
  }

  //  查询：做查询的逻辑  values是表单的查询的参数
  function query(values) {
    // 通过this.test.config可以更改partConfig和lineConfig中的数据
    this.test.config.partConfig = {
      chartData: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
      ],
    }
    this.test.config.lineConfig = {
      xAxisData: [
        '2022/8/11',
        '2022/8/12',
        '2022/8/13',
      ],
      yAxisData: [150, 230, 224],
    }
    // 饼图和折线图的数据更改后，重新渲染图表
    this.test.render();
  }

  // 重置
  function reset() {
    console.log('重置');
  }
</script>

</html>